<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时信息中心 - 跑单评价系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

        .header {
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .header h1 {
            color: #2c3e50;
            font-size: 24px;
        }

        .header .logout {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .header .logout:hover {
            background-color: #c0392b;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .page-header {
            margin-bottom: 30px;
        }

        .page-title {
            color: #2c3e50;
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #7f8c8d;
            font-size: 14px;
        }

        .breadcrumb a {
            color: #3498db;
            text-decoration: none;
            transition: color 0.3s;
        }

        .breadcrumb a:hover {
            color: #2980b9;
        }

        .breadcrumb .separator {
            color: #bdc3c7;
        }

        /* 信息卡片样式 */
        .info-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

        .info-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .info-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.08);
        }

        .card-header {
            background-color: #f8f9fa;
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-header h3 {
            color: #2c3e50;
            font-size: 18px;
            font-weight: 600;
        }

        .card-body {
            padding: 20px;
            min-height: 200px;
        }

        /* 天气卡片样式 */
        .weather-display {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .weather-main {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .weather-icon {
            width: 80px;
            height: 80px;
        }

        .weather-temp {
            font-size: 36px;
            font-weight: 700;
            color: #2c3e50;
        }

        .weather-desc {
            font-size: 18px;
            color: #7f8c8d;
            margin-top: 5px;
        }

        .weather-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .weather-item {
            display: flex;
            flex-direction: column;
        }

        .weather-label {
            font-size: 14px;
            color: #95a5a6;
            margin-bottom: 5px;
        }

        .weather-value {
            font-size: 16px;
            font-weight: 500;
            color: #2c3e50;
        }

        /* 汇率卡片样式 */
        .exchange-table {
            width: 100%;
            border-collapse: collapse;
        }

        .exchange-table th,
        .exchange-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        .exchange-table th {
            background-color: #f8f9fa;
            color: #7f8c8d;
            font-weight: 600;
            font-size: 14px;
        }

        .exchange-table td {
            color: #2c3e50;
            font-size: 16px;
        }

        .currency-name {
            font-weight: 500;
        }

        .currency-rate {
            color: #3498db;
            font-weight: 600;
        }

        /* 新闻卡片样式 */
        .news-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .news-item {
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            transition: background-color 0.3s;
            cursor: pointer;
        }

        .news-item:hover {
            background-color: #e9ecef;
        }

        .news-title {
            font-size: 16px;
            font-weight: 500;
            color: #2c3e50;
            margin: 0 0 8px 0;
            line-height: 1.4;
        }

        .news-meta {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            color: #95a5a6;
        }

        /* 通用样式 */
        .update-time {
            font-size: 12px;
            color: #95a5a6;
            text-align: right;
        }

        .loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 0;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 15px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading p {
            color: #7f8c8d;
            font-size: 14px;
        }

        .error {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px 0;
            color: #e74c3c;
            text-align: center;
        }

        /* 按钮样式 */
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .btn-primary {
            background-color: #3498db;
            color: white;
        }

        .btn-primary:hover {
            background-color: #2980b9;
        }

        .btn-secondary {
            background-color: #95a5a6;
            color: white;
        }

        .btn-secondary:hover {
            background-color: #7f8c8d;
        }

        /* 输入框样式 */
        .form-input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            width: 120px;
        }

        .form-input:focus {
            outline: none;
            border-color: #3498db;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .info-cards {
                grid-template-columns: 1fr;
            }
            
            .card-header {
                flex-wrap: wrap;
            }
            
            .card-header h3 {
                width: 100%;
                margin-bottom: 10px;
            }
            
            .weather-display {
                flex-direction: column;
                text-align: center;
            }
            
            .weather-details {
                margin-top: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>跑单评价系统</h1>
        <button class="logout" onclick="logout()">退出登录</button>
    </div>

    <div class="container">
        <div class="page-header">
            <div class="breadcrumb">
                <a href="/reviews">首页</a>
                <span class="separator">/</span>
                <span>实时信息中心</span>
            </div>
            <h2 class="page-title">实时信息中心</h2>
        </div>

        <!-- 天气信息卡片 -->
        <div class="info-cards">
            <div class="info-card weather-card">
                <div class="card-header">
                    <h3>天气信息</h3>
                    <div style="display: flex; gap: 10px;">
                        <input type="text" id="cityInput" class="form-input" placeholder="输入城市" value="北京">
                        <button id="weatherSearchBtn" class="btn btn-primary">查询</button>
                    </div>
                </div>
                <div class="card-body" id="weatherContent">
                    <div class="loading">
                        <div class="loading-spinner"></div>
                        <p>加载天气信息中...</p>
                    </div>
                </div>
            </div>
            
            <!-- 汇率信息卡片 -->
            <div class="info-card exchange-card">
                <div class="card-header">
                    <h3>汇率信息</h3>
                    <button id="refreshExchangeBtn" class="btn btn-secondary">刷新</button>
                </div>
                <div class="card-body" id="exchangeContent">
                    <div class="loading">
                        <div class="loading-spinner"></div>
                        <p>加载汇率信息中...</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新闻信息卡片 -->
        <div class="info-cards">
            <div class="info-card news-card" style="grid-column: span 2;">
                <div class="card-header">
                    <h3>实时新闻</h3>
                    <div style="display: flex; gap: 10px;">
                        <select id="newsCategory" class="form-input" style="width: auto;">
                            <option value="general">综合</option>
                            <option value="business">财经</option>
                            <option value="technology">科技</option>
                            <option value="sports">体育</option>
                        </select>
                        <button id="refreshNewsBtn" class="btn btn-secondary">刷新</button>
                    </div>
                </div>
                <div class="card-body" id="newsContent">
                    <div class="loading">
                        <div class="loading-spinner"></div>
                        <p>加载新闻信息中...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 获取JWT token
        const getToken = () => {
            return localStorage.getItem('token');
        };

        // 带认证的fetch请求
        const fetchWithAuth = async (url, options = {}) => {
            const token = getToken();
            const headers = {
                ...options.headers,
                'Authorization': `Bearer ${token}`
            };
            
            try {
                const response = await fetch(url, {
                    ...options,
                    headers
                });
                
                // 401表示未授权或token过期
                if (response.status === 401) {
                    alert('登录已过期，请重新登录');
                    window.location.href = '/login';
                    throw new Error('未授权');
                }
                
                return response;
            } catch (error) {
                console.error('请求失败:', error);
                throw error;
            }
        };

        // 退出登录
        const logout = () => {
            // 清除token
            localStorage.removeItem('token');
            // 跳转到登录页面
            window.location.href = '/login';
        };

        // 加载天气信息
        const loadWeatherData = async (city = '北京') => {
            const weatherContent = document.getElementById('weatherContent');
            
            // 显示加载状态
            weatherContent.innerHTML = `
                <div class="loading">
                    <div class="loading-spinner"></div>
                    <p>加载${city}天气信息中...</p>
                </div>
            `;
            
            try {
                // 调用后端API获取真实天气数据
                const response = await fetch(`/api/external/weather?city=${encodeURIComponent(city)}`, {
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
                    }
                });
                
                if (!response.ok) {
                    throw new Error('获取天气数据失败');
                }
                
                const data = await response.json();
                
                // 渲染天气数据
                weatherContent.innerHTML = `
                    <div class="weather-display">
                        <div class="weather-main">
                            <div class="weather-icon">
                                <img src="https://via.placeholder.com/80x80/3498db/FFFFFF?text=${data.weatherIcon}" alt="${data.weather}">
                            </div>
                            <div>
                                <div class="weather-temp">${data.temperature}°</div>
                                <div class="weather-desc">${data.weather}</div>
                            </div>
                        </div>
                        <div>
                            <div style="font-size: 16px; color: #2c3e50; font-weight: 500;">${city}</div>
                            <div style="font-size: 14px; color: #7f8c8d;">${data.date}</div>
                        </div>
                    </div>
                    
                    <div class="weather-details">
                        <div class="weather-item">
                            <span class="weather-label">体感温度</span>
                            <span class="weather-value">${data.feelsLike}°C</span>
                        </div>
                        <div class="weather-item">
                            <span class="weather-label">湿度</span>
                            <span class="weather-value">${data.humidity}%</span>
                        </div>
                        <div class="weather-item">
                            <span class="weather-label">风速</span>
                            <span class="weather-value">${data.windSpeed} m/s</span>
                        </div>
                        <div class="weather-item">
                            <span class="weather-label">气压</span>
                            <span class="weather-value">${data.pressure} hPa</span>
                        </div>
                    </div>
                    
                    <div class="update-time">更新时间: ${data.updateTime}</div>
                `;
            } catch (error) {
                console.error('获取天气信息失败:', error);
                weatherContent.innerHTML = `
                    <div class="error">
                        <p>获取天气信息失败，请稍后重试</p>
                    </div>
                `;
            }
        };

        // 加载汇率信息
        const loadExchangeData = async () => {
            const exchangeContent = document.getElementById('exchangeContent');
            
            // 显示加载状态
            exchangeContent.innerHTML = `
                <div class="loading">
                    <div class="loading-spinner"></div>
                    <p>加载汇率信息中...</p>
                </div>
            `;
            
            try {
                // 调用后端API获取真实汇率数据
                const response = await fetch('/api/external/exchange', {
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
                    }
                });
                
                if (!response.ok) {
                    throw new Error('获取汇率数据失败');
                }
                
                const data = await response.json();
                
                // 渲染汇率数据
                const ratesHtml = data.rates.map(rate => `
                    <tr>
                        <td><span class="currency-name">${rate.currency}</span></td>
                        <td>${rate.code}</td>
                        <td><span class="currency-rate">${rate.rate}</span></td>
                        <td>${rate.change}</td>
                    </tr>
                `).join('');
                
                exchangeContent.innerHTML = `
                    <table class="exchange-table">
                        <thead>
                            <tr>
                                <th>货币名称</th>
                                <th>货币代码</th>
                                <th>兑换汇率(1CNY)</th>
                                <th>涨跌幅</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${ratesHtml}
                        </tbody>
                    </table>
                    <div class="update-time">更新时间: ${data.updateTime}</div>
                `;
            } catch (error) {
                console.error('获取汇率信息失败:', error);
                exchangeContent.innerHTML = `
                    <div class="error">
                        <p>获取汇率信息失败，请稍后重试</p>
                    </div>
                `;
            }
        };

        // 加载新闻信息
        const loadNewsData = async (category = 'general') => {
            const newsContent = document.getElementById('newsContent');
            
            // 显示加载状态
            newsContent.innerHTML = `
                <div class="loading">
                    <div class="loading-spinner"></div>
                    <p>加载新闻信息中...</p>
                </div>
            `;
            
            try {
                // 调用后端API获取真实新闻数据
                const response = await fetch(`/api/external/news?category=${category}`, {
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
                    }
                });
                
                if (!response.ok) {
                    throw new Error('获取新闻数据失败');
                }
                
                const data = await response.json();
                
                // 渲染新闻数据
                const newsHtml = data.articles.map(article => `
                    <div class="news-item" onclick="window.open('${article.url}', '_blank')">
                        <h4 class="news-title">${article.title}</h4>
                        <div class="news-meta">
                            <span>${article.source}</span>
                            <span>${article.publishTime}</span>
                        </div>
                    </div>
                `).join('');
                
                newsContent.innerHTML = `
                    <div class="news-list">
                        ${newsHtml}
                    </div>
                    <div class="update-time">更新时间: ${data.updateTime}</div>
                `;
            } catch (error) {
                console.error('获取新闻信息失败:', error);
                newsContent.innerHTML = `
                    <div class="error">
                        <p>获取新闻信息失败，请稍后重试</p>
                    </div>
                `;
            }
        };

        // 模拟天气数据
        const getMockWeatherData = (city) => {
            const weatherTypes = ['晴', '多云', '阴', '小雨', '中雨', '大雨'];
            const weatherIcons = ['☀️', '☁️', '☁️', '🌧️', '🌧️', '🌧️'];
            const randomIndex = Math.floor(Math.random() * weatherTypes.length);
            
            return {
                city: city,
                weather: weatherTypes[randomIndex],
                weatherIcon: weatherIcons[randomIndex],
                temperature: Math.floor(Math.random() * 15) + 15, // 15-30度
                feelsLike: Math.floor(Math.random() * 15) + 15,
                humidity: Math.floor(Math.random() * 40) + 40, // 40-80%
                windSpeed: (Math.random() * 10 + 2).toFixed(1), // 2-12 m/s
                pressure: Math.floor(Math.random() * 20) + 1000, // 1000-1020 hPa
                date: new Date().toLocaleDateString(),
                updateTime: new Date().toLocaleTimeString()
            };
        };

        // 模拟汇率数据
        const getMockExchangeData = () => {
            const rates = [
                { currency: '美元', code: 'USD', rate: (Math.random() * 0.1 + 0.14).toFixed(4), change: '↑0.2%' },
                { currency: '欧元', code: 'EUR', rate: (Math.random() * 0.1 + 0.13).toFixed(4), change: '↓0.1%' },
                { currency: '日元', code: 'JPY', rate: (Math.random() * 20 + 21).toFixed(2), change: '↑0.3%' },
                { currency: '英镑', code: 'GBP', rate: (Math.random() * 0.1 + 0.11).toFixed(4), change: '↑0.5%' },
                { currency: '港币', code: 'HKD', rate: (Math.random() * 0.5 + 1.08).toFixed(4), change: '↑0.05%' }
            ];
            
            return {
                base: 'CNY',
                rates: rates,
                updateTime: new Date().toLocaleTimeString()
            };
        };

        // 模拟新闻数据
        const getMockNewsData = (category) => {
            const categoryMap = {
                'general': [
                    { title: '国家发改委：将加强基础设施建设，推动经济高质量发展', source: '央视新闻', publishTime: '2小时前', url: '#' },
                    { title: '全国多地迎来强降雨天气，防汛工作有序展开', source: '人民日报', publishTime: '4小时前', url: '#' },
                    { title: '新一批国家高新区获批，助力区域经济转型升级', source: '经济日报', publishTime: '6小时前', url: '#' },
                    { title: '我国新能源汽车出口量持续增长，创历史新高', source: '新华社', publishTime: '8小时前', url: '#' },
                    { title: '文化和旅游部推出暑期文化旅游消费季活动', source: '中国旅游报', publishTime: '10小时前', url: '#' }
                ],
                'business': [
                    { title: '央行：继续实施稳健的货币政策，保持流动性合理充裕', source: '金融时报', publishTime: '1小时前', url: '#' },
                    { title: '国内消费市场持续回暖，上半年消费增速超预期', source: '经济观察报', publishTime: '3小时前', url: '#' },
                    { title: '多家银行下调存款利率，引导资金流向实体经济', source: '财经网', publishTime: '5小时前', url: '#' },
                    { title: '新能源产业投资热度不减，一季度投资增长30%', source: '证券时报', publishTime: '7小时前', url: '#' },
                    { title: '多地出台政策支持中小企业发展，优化营商环境', source: '21世纪经济报道', publishTime: '9小时前', url: '#' }
                ],
                'technology': [
                    { title: '我国量子计算研究取得重大突破，实现76个光子量子优势', source: '科技日报', publishTime: '2小时前', url: '#' },
                    { title: 'AI大模型应用落地加速，多个行业迎来智能化转型', source: '中国科学报', publishTime: '4小时前', url: '#' },
                    { title: '5G-A网络试点启动，传输速度提升10倍', source: '通信世界', publishTime: '6小时前', url: '#' },
                    { title: '国产芯片制造工艺取得进展，7nm芯片实现量产', source: '半导体行业观察', publishTime: '8小时前', url: '#' },
                    { title: '自动驾驶技术测试范围扩大，多家企业获测试牌照', source: '汽车之家', publishTime: '10小时前', url: '#' }
                ],
                'sports': [
                    { title: '国足公布新一期集训名单，备战亚洲杯预选赛', source: '体坛周报', publishTime: '1小时前', url: '#' },
                    { title: '中国女排3-0横扫日本队，夺得世界女排联赛冠军', source: '中国体育报', publishTime: '3小时前', url: '#' },
                    { title: 'CBA总决赛第三场：广东队险胜辽宁队，总比分2-1', source: '篮球先锋报', publishTime: '5小时前', url: '#' },
                    { title: '中国田径队公布亚运会参赛名单，苏炳添领衔', source: '田径周报', publishTime: '7小时前', url: '#' },
                    { title: '中超联赛第十轮战报：上海海港2-0胜北京国安', source: '足球周刊', publishTime: '9小时前', url: '#' }
                ]
            };
            
            return {
                category: category,
                articles: categoryMap[category] || categoryMap['general'],
                updateTime: new Date().toLocaleTimeString()
            };
        };

        // 绑定事件监听器
        document.addEventListener('DOMContentLoaded', function() {
            // 加载初始数据
            loadWeatherData();
            loadExchangeData();
            loadNewsData();
            
            // 天气查询按钮
            document.getElementById('weatherSearchBtn').addEventListener('click', function() {
                const city = document.getElementById('cityInput').value.trim();
                if (city) {
                    loadWeatherData(city);
                } else {
                    alert('请输入城市名称');
                }
            });
            
            // 汇率刷新按钮
            document.getElementById('refreshExchangeBtn').addEventListener('click', loadExchangeData);
            
            // 新闻刷新按钮
            document.getElementById('refreshNewsBtn').addEventListener('click', function() {
                const category = document.getElementById('newsCategory').value;
                loadNewsData(category);
            });
            
            // 新闻分类改变
            document.getElementById('newsCategory').addEventListener('change', function() {
                const category = this.value;
                loadNewsData(category);
            });
            
            // 回车键查询天气
            document.getElementById('cityInput').addEventListener('keyup', function(e) {
                if (e.key === 'Enter') {
                    document.getElementById('weatherSearchBtn').click();
                }
            });
        });
    </script>
</body>
</html>